<template>
  <i class="icon" :style="style">
    <svg>
      <use :xlink:href="symbolId" rel="external nofollow" :fill="color"></use>
    </svg>
  </i>
</template>

<script lang="ts" setup>
import { CSSProperties } from "vue";

import { isUndefined } from "@/utils";

defineOptions({ name: "Icon" });

const props = defineProps({
  // icon name
  name: { type: String || undefined, default: undefined },
  // icon color
  color: { type: String || undefined, default: undefined },
  // icon size
  size: { type: Number || undefined, default: 16 },
});

//svg图片名称计算属性
const symbolId = computed(() => {
  return `#icon-${props.name}`;
});
const style = computed<CSSProperties>(() => {
  const { size, color } = props;
  if (!size && !color) return {};

  return {
    fontSize: isUndefined(size) ? undefined : `${size}px`,
    "--color": color,
  };
});
</script>
<style lang="scss" scoped>
.icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;

  svg {
    width: 1em;
    height: 1em;
  }
}
</style>
